﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>人脸采集</title>
    <link href="Script/camera.js/css/aui.css" rel="stylesheet" />
    <link href="Script/camera.js/css/intial.css" rel="stylesheet" />
    <link href="static/lib/diygw-mobile-all.min.css" rel="stylesheet" />
    <style type="text/css">
        * {
            font-family: "黑体";
            margin: 0;
            padding: 0;
        }

        body, html {
            height: 100%;
            overflow: auto;
        }

        html {
            background-color: hsla(0,0%,96%,1.00);
        }

        body {
            background: none;
        }

        section {
            padding-top: 3rem;
            font-size: 0.9rem;
        }

        #headimg {
            width: 12rem;
            height: 12rem;
            border: 2px solid #ffffff;
            border-radius: 100%;
            margin: auto;
            margin-bottom: 1.7rem;
            background-size: 100% 100% !important;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .btn {
            position: relative;
            z-index: 10;
            padding: 0.5rem;
            height: 1.6rem;
            line-height: 1.6rem;
            margin: auto;
            font-size: 0.8rem;
            color: #fd1142 !important;
            border: 1px solid #fd1142;
            border-radius: 0.2rem;
        }

            .btn img {
                display: inline-block;
                width: 0.75rem;
                margin-left: 0.1rem;
            }


        /*截图上传页面*/
        .clipbg {
            position: fixed;
            background: black;
            top: 0;
            z-index: 999;
            width: 100%;
            height: 100%;
            left: 0;
        }

        .loading {
            position: absolute;
            top: 40%;
            width: 38%;
            left: 31%;
            height: 1.6rem;
            line-height: 1.6rem;
            z-index: 99999;
            text-align: center;
            color: #ffffff;
            border-radius: 0.2rem;
            background: #9f9f9f;
        }

        .clipbg #clipArea {
            width: 100%;
            height: 80%;
            margin: auto;
        }

        .clipbg .footer {
            width: 90%;
            position: fixed;
            left: 5%;
            bottom: 0px;
            text-align: center;
        }

        .clipbg dl {
            background: #ffffff;
            border-radius: 0.4rem;
            overflow: hidden;
            margin-bottom: 0.6rem;
        }

        .clipbg dd {
            position: relative;
            height: 2.25rem;
            line-height: 2.25rem;
            border-bottom: 1px solid #999999;
        }

        .clipbg .back {
            height: 2.25rem;
            line-height: 2.25rem;
            border-radius: 0.4rem;
            margin-bottom: 0.4rem;
            background: #ffffff;
        }

        .clipbg dd input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 11;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            -khtml-opacity: 0;
            opacity: 0;
        }

        #headimg img {
            border-radius: 300px;
        }
    </style>
</head>
<body>
    <section class="aui-text-center">
        <div id="headimg">

            <img id="tx" src="">
        </div>
        <span class="btn">
            第一步：点击 拍照
        </span>
        <div align="center">
            <br /><progress id='progress' style='width:100px'></progress>
        </div>
    </section>
    <!--图片裁剪-->
    <div class="clipbg displaynone">

  
        
      
        <div id="clipArea" style=" position:absolute;  z-index: -1;">
            <img style="  position:relative; top:15%; left:1%;  pointer-events: none;  z-index: 1" src="images/facelunku.png" />"
        </div>
        <div class="loading displaynone">正在载入图片...</div>
        <div class="footer">
            <dl>
                <dd style="background: #fe1041; color: #ffffff;border: none;">第二步：点击打开相机<input type="file" id="file" capture="camera" accept="image/*"></dd>
                <dd id="clipBtn">第三步：移动照片调整头像-->点击保存</dd>
            </dl>
            <div class="back">取消</div>
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label  text-red" for="916581">注意事项</label>
        </div>
        <div class="weui-cell__bd">
            <textarea style="height:70px;" rows="3" readonly="readonly" placeholder="在拍照后进行裁剪移动设备上双指捏合为缩放调整大小，双指旋转方法可根据旋转方向每次旋转90度可将旋转图片调正" name="name_916581" id="916581" class="weui-textarea "></textarea>
        </div>
    </div>
    <br /><br /><br />
    <div class="weui-form">
        <div class="weui-form-item">
            <a data-index="9385700" id="submit" class="weui-btn    bg-blue  ">第四步：上传照片</a>
            <a data-index="9385700" href="javascript:history.back(-1)" class="weui-btn    bg-gradual-green  ">返 回</a>
        </div>
    </div>
    <script src="Script/jquery-1.8.3.min.js"></script>
    <script src="Script/camera.js/hammer.min.js"></script>
    <script src="Script/camera.js/lrz.all.bundle.js"></script>
    <script src="Script/camera.js/iscroll-zoom-min.js"></script>
    <script src="Script/camera.js/PhotoClip.js"></script>
    <script src="layer/layer.js"></script>



    <script type="text/javascript">
        function getUrlParam(openid) {
            var reg = new RegExp("(^|&)" + openid + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }

        $(function () {
            var openid = getUrlParam("openid");
            $.post("Ajax/InvalidSession.ashx", {  }, function (data) {
                if (data == "0") {
                    window.location.replace("Binding.aspx" );
                }
            });
        });
        $(".btn").click(function () {
            $(".clipbg").fadeIn()
        })
        var clipArea = new PhotoClip("#clipArea", {
            size: [400, 400],//裁剪框大小
            outputSize: [0, 0],//打开图片大小，[0,0]表示原图大小
            file: "#file",
            ok: "#clipBtn",
            loadStart: function () { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）
                $(".loading").removeClass("displaynone");

            },
            loadComplete: function () {//图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象，并将图片的 <img> 对象作为参数传入。
                $(".loading").addClass("displaynone");

            },
            done: function (dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。
                console.log(dataURL);//dataURL裁剪后图片地址base64格式提交给后台处理
                $('#tx').attr("src", dataURL);
                $(".clipbg").fadeOut()
            }
        });
        $(".back").click(function () {
            $(".clipbg").fadeOut()
        })


        $(function () {
            $("#progress").attr("style", "display:none;");
            //图片
            function previewWithObject() {
                //方式一：

                ///var files = document.getElementById("myfile").files[0];
                var read = new FileReader();
                read.readAsDataURL(event.target.files[0]);
                read.onprogress = function (event) {
                    //实现进度条
                    if (event.lengthComputable)
                        document.getElementById("progress").value = event.loaded / event.total;
                    document.getElementById("p1").value = event.loaded / event.total;
                }
                read.onload = function (event) {
                    myimg.src = event.target.result;
                }

                //方式二:
                //var target=event.target.files[0];
                //var url=URL.createObjectURL(target);
                //myimg.src=url;
            }
            $.ajax({
                type: "post",
                url: "Ajax/UploadImage.ashx",
                data: {  funcName: "LoadImages" },
                success: function (data) {
                    if (data != '') {
                        $('#tx').attr("src", "../.." + data + '?' + Math.random());
                    }

                }
            });
            $("#submit").click(function () {
                var openid = getUrlParam("openid");
                $("#progress").attr("style", "display:block;");
                var bs64images = $('#tx').attr("src");
                var formFile = new FormData();
                formFile.append("funcName", "Images");
                formFile.append("bs64images", bs64images);
                $.ajax({
                    type: "post",
                    url: "Ajax/UploadImage.ashx",
                    contentType: false,
                    processData: false,
                    cache: false,
                    data: formFile,
                    success: function (data) {
                        if (data == "-1") {
                            $("#progress").attr("style", "display:none;");
                            layer.alert("上传失败");
                        } else if (data == "-2") {
                            window.location.href = "Binding.aspx";
                        } else if (data == "-3") {
                            $("#progress").attr("style", "display:none;");
                            layer.alert("请进行拍照后才能保存照片哦！");
                        } else if (data == "1") {
                            layer.alert("上传成功，稍后去个人中心查看照片质量状态！");
                            setTimeout("window.location.reload()", 2000);//页面5秒自动刷新
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>
